<template>
  <el-container style="height:100%">
    <el-main>
      <div class="searchArea">
        <el-form ref="form" label-width="120px" inline style="float:right;margin-right:60px;">
          <el-form-item label="业务系统：">
            <el-select v-model="systemName" placeholder @change="changeSystem">
              <el-option
                v-for="item in systemList"
                :key="item.businessSystemId"
                :label="item.businessSystemName"
                :value="item.businessSystemId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据类型：">
            <el-select v-model="dataType" placeholder @change="changeDataType">
              <el-option
                v-for="item in dataTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否异常：" style="margin-right:30px">
            <el-select v-model="isException" placeholder @change="changeException">
              <el-option
                v-for="item in ExceptionList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="tableName"
              clearable
              placeholder="请输入数据项集名称查询"
              @keyup.enter.native="search"
            >
              <i
                slot="suffix"
                style="line-height: 35px;"
                class="font_family iconfont icon-sousuo"
                @click="search"
              ></i>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <!-- 表格 -->
        <el-table
          ref="databaseTable"
          v-loading="loading"
          :data="databaseTableData"
          height="calc(100vh - 260px)"
          tooltip-effect="light"
          style="margin:20px 60px;width:95%"
        >
          <el-table-column fixed label="序号" width="60">
            <template slot-scope="scope">{{ indexMethod(scope.$index) }}</template>
          </el-table-column>
          <el-table-column label="业务系统名称" prop="appSysName" show-overflow-tooltip></el-table-column>
          <el-table-column label="数据项集中文名称" prop="dataSetChineseName" show-overflow-tooltip></el-table-column>
          <el-table-column label="数据项集英文名称" prop="dataSetEnglishName" show-overflow-tooltip></el-table-column>
          <el-table-column label="数据类型" prop="dataType" show-overflow-tooltip></el-table-column>
          <el-table-column label="接入方式" prop="accessType" show-overflow-tooltip></el-table-column>
          <el-table-column label="更新周期" show-overflow-tooltip>
            <template slot-scope="scope">{{ cornToDate(scope.row.updateCircle) }}</template>
          </el-table-column>
          <el-table-column label="是否异常" show-overflow-tooltip>
            <template slot-scope="scope">{{ abnormalFlagTransfer(scope.row.abnormalFlag) }}</template>
          </el-table-column>
          <el-table-column label="最后一次接入时间" prop="lastAccessTime" show-overflow-tooltip></el-table-column>
          <el-table-column label="任务ID" prop="taskId" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="light" content="查看详情" placement="top">
                <i class="OSS iconwenbenxiangqing enc-icon1" @click="Detail(scope.row)"></i>
              </el-tooltip>
              <!-- </div> -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="clearfix enc-pagination" style="margin:20px 0">
          <el-pagination
            style="float:right"
            background
            :current-page="currentPage"
            :page-sizes="[10,20,50,100]"
            :total="databaseTableDataTotal"
            :page-size="pageSize"
            layout="prev, pager, next, jumper,sizes,total"
            @size-change="handleSizeChange"
            @current-change="goPage"
          ></el-pagination>
        </div>
      </div>
      <taskMonitorDetail v-if="taskMonitorDetailVisiable" ref="taskMonitor" @init="init" />
    </el-main>
  </el-container>
</template>

<script>
import { queryDataBaseData } from "@/api/accessMonitorSurvey";
import { getBusinessList } from "@/api/databaseManagement";
import { getOne } from "@/api/dictionary";
import taskMonitorDetail from "./taskMonitorDetail";

export default {
  name: "Index",
  data() {
    return {
      loading: false,
      systemName: "",
      systemList: [],
      dataType: "",
      dataTypeList: [
        { name: "全部", id: "" },
        { name: "数据库", id: "01" },
        { name: "文件", id: "02" },
        { name: "流式数据", id: "03" }
      ],
      isException: "",
      ExceptionList: [
        { name: "全部", id: "" },
        { name: "是", id: true },
        { name: "否", id: false }
      ],
      tableName: "",
      currentPage: 1,
      pageSize: 10,
      setVisible: false,
      tableHeadData: [],
      databaseTableData: [],
      databaseTableDataTotal: 0,
      taskMonitorDetailVisiable: false,
      accessWayList: this.$store.state.tree.dictionaryList.BCJLX
    };
  },
  components: { taskMonitorDetail },
  created() {
    this.init();
  },
  activated() {
    this.init();
  },
  methods: {
    Detail(row) {
      this.taskMonitorDetailVisiable = true;
      setTimeout(() => {
        this.$refs.taskMonitor.openDialog(row);
      }, 100);
    },
    init() {
      this.loading = true;
      this.getSystem();
      const params = {
        accessMonitorSurveyType: this.dataType,
        dataSetName: this.tableName,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        sysId: this.systemName,
        isAbnormal: this.isException
      };
      queryDataBaseData(params).then(res => {
        if (res.data.resultCode === 0) {
          this.loading = false;
          this.databaseTableData = res.data.data.data;
          this.databaseTableDataTotal = res.data.data.recordTotal;
        } else {
          this.loading = false;
          this.$message.error(res.data.resultMessage);
        }
      });
    },
    changeSystem() {
      this.currentPage = 1;
      this.init();
    },
    changeDataType() {
      this.currentPage = 1;
      this.init();
    },
    changeException() {
      this.currentPage = 1;
      this.init();
    },
    search() {
      this.currentPage = 1;
      this.init();
    },
    handleSizeChange(page) {
      this.pageSize = page;
      this.init();
    },
    goPage(page) {
      this.currentPage = page;
      this.init();
    },
    indexMethod(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1;
    },
    getSystem() {
      getBusinessList().then(res => {
        if (res.data.resultCode == 0) {
          this.systemList = res.data.data;
          this.systemList.splice(0, 0, {
            businessSystemId: "",
            businessSystemName: "全部"
          });
        } else {
          this.$message.error(res.data.resultMessage);
        }
      });
    },
    // accessWayTransfer(accessWay) {
    //   return this.accessWayList.find(e => {
    //     return e.dataValue === accessWay;
    //   }).dataName;
    // },
    // dataTypeTransfer(dataType) {
    //   return this.dataTypeList.find(e => {
    //     return e.id === dataType;
    //   }).name;
    // },
    abnormalFlagTransfer(abnormalFlag) {
      if (abnormalFlag) {
        return "是";
      }
      return "否";
    },
    cornToDate(str) {
      if (str == null || str == "-1") {
        return "无";
      }
      const dateObj = {
        type: "",
        year: "",
        week: "",
        month: "",
        date: "",
        hour: "",
        minute: "",
        second: ""
      };
      if (str !== "-1" && str) {
        // 秒 分 时 日 月 周 年
        const arr = str.split(" ");
        if (arr.length < 3) return; // 异常数据返回
        const hourArr = arr[2].split("/");
        const minuteArr = arr[1].split("/");
        if (arr[5] !== "?") {
          // 每周
          dateObj.type = "每周";
          switch (arr[5]) {
            case "MON": {
              dateObj.week = "星期一";
              break;
            }
            case "TUE": {
              dateObj.week = "星期二";
              break;
            }
            case "WED": {
              dateObj.week = "星期三";
              break;
            }
            case "THU": {
              dateObj.week = "星期四";
              break;
            }
            case "FRI": {
              dateObj.week = "星期五";
              break;
            }
            case "SAT": {
              dateObj.week = "星期六";
              break;
            }
            case "SUN": {
              dateObj.week = "星期日";
              break;
            }
            default:
              break;
          }
          dateObj.hour = `${arr[2]}时`;
          dateObj.minute = `${arr[1]}分`;
        } else if (arr[3] !== "*" && arr[3] !== "?") {
          // 每月
          dateObj.type = "每月";
          dateObj.date = `${arr[3]}号`;
          dateObj.hour = `${arr[2]}时`;
          dateObj.minute = `${arr[1]}分`;
        } else if (hourArr.length === 2) {
          // 每隔xx小时
          dateObj.type = "每隔";
          dateObj.hour = `${hourArr[1]}时`;
        } else if (minuteArr.length === 2) {
          // 每隔xx分钟
          dateObj.type = "每隔";
          dateObj.minute = `${minuteArr[1]}分`;
        } else {
          // 每天
          dateObj.type = "每天";
          dateObj.hour = `${arr[2]}时`;
          dateObj.minute = `${arr[1]}分`;
        }
      }
      let dateStr = "";
      Object.keys(dateObj).forEach(key => {
        if (dateObj[key] !== "") {
          dateStr += dateObj[key];
        }
      });
      return dateStr;
    }
  }
};
</script>

<style lang="scss">
.searchArea {
  float: right;
  display: flex;
  flex-direction: row;
  margin: 10px 0 0 0;
  .searchTxt {
    width: 259px;
    margin-right: 10px;
  }
}
.set_box {
  margin: 10px 0 20px 0;
  position: absolute;
  right: 10vh;
  .el-checkbox-group > label {
    display: block;
  }
  > span {
    /* position: absolute;
    left: 10px;
    top: 2px; */
    margin-left: 10px;
    cursor: pointer;
  }
  .el-checkbox {
    width: auto;
  }
  .set_content {
    position: absolute;
    top: 20px;
    background-color: #ffffff;
    z-index: 1001;
    border: 1px solid #e6eaed;
    padding: 8px;
    //height: 300px;
    overflow: auto;
  }
}
</style>
